<template>
  <view>
    <!-- 轮播图的区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item, i) in 3" :key="i">
        <navigator class="swiper-item" url="">
          <image src="https://dfs.zuchecdn.com/visit/carmktplat/g/V3/503a5cf259844b019097de8e3961f0b6.jpg"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 订车内容 -->
    <view class="uni-padding-wrap order-car uni-common-mt">

      <view class="uni-flex uni-flex-top order-car-content">
        <view class="float-item float-item-left">
          <view class="position-left">
            取还车网点
          </view>
          <view class="city" @click="gotoMap()">
            <!-- 使用插值表达式 变量 city 调用获取地址的方法 -->
            {{location.city}}
          </view>
        </view>
        <view class="float-item float-item-mid">
          <!-- 使用插值表达式 变量 city 调用获取地址的方法 -->
          <view class="position-mid">{{location.street}}自助点</view>
          <!-- 使用插值表达式 变量 distance 调用获取地址距离的方法 -->
          <view class="disstance">距您700m</view>
        </view>
        <view class="float-item float-item-right">
          <view class="position-right">
            取还车网点
          </view>
          <!-- 是否开启跨网还车 -->
          <view class="uni-list-cell uni-list-cell-pd">
            <view class="uni-list-cell-db"></view>
            <!-- 跨网还车按钮 -->
            <switch @click="switchChange" />
          </view>
        </view>

      </view>
      <!--  -->
      <!-- 还车网点 uni-flex uni-flex-mid-->
      <view :class="uni_flex">
        <view class="return-car">
          还车网点
        </view>
        <view class="return-position">
          <view class="city" @click="gotoMap()">
            <!-- 使用插值表达式 变量 city 调用获取地址的方法 -->
            {{location.city}}
          </view>
          <view class="position-mid">
            <!-- 使用插值表达式 变量 city 调用获取地址的方法 -->
            {{location.street}}自助点
          </view>
          <!-- <li></li> -->
        </view>
      </view>
      <!-- 取车时间 -->
      <view class="uni-flex uni-flex-bottom">
        <view class="float-item rentalTime">
          <view class="month" @click="chooseDate('renTime')">{{ rentTime }}</view>
          <view class="datailTime" @click="chooseDate('renTime')">
            今天{{currentTime}}
          </view>

          <label class="checkbox">
            <!-- 点击传递 用户id 作为参数 -->
            <checkbox value="cb" @click="" />上门取车
          </label>
        </view>
        <!-- 如果是今天 填今天 如果不是则为周几 -->
        <view class="float-item totalTime">
          <view class="float-time border-box border-box-left">
          </view>
          <!-- 调用处理日期的函数 -->
          <!-- 可以使用text标签 -->
          <view class="float-time this-time">共{{computedDays}}天</view>
          <view class="float-time border-box border-box-right">
          </view>
        </view>
        <!-- 还车时间 -->
        <view class="float-item returnTime" @click="chooseDate('reTime')">
          <view class="month">{{ returnTime }}</view>
          <view class="datailTime">
            <!-- returnTime -->
            今天{{currentTime}}
          </view>
        </view>
        <button class="order-buttom" type="primary" @click='gotoRent'>去订车</button>
      </view>
    </view>

    <!-- 活动 -->
    <view class="active">
      <view class="image-content">
        <image style="width: 100%; height: 7rem; background-color: #eeeeee;" :src="src"></image>
      </view>
    </view>
    <!-- 放心租车 -->
    <view class="ease-rent">
      <!--  -->
      <view class="ease-rent-item ease-rent-top">
        <view class="ease-title">
          大品牌 放心租
        </view>
        <view class="look-content" @click="gotoDetail">
          查看全部 >
        </view>
      </view>
      <!-- 零接触 信誉分 24小时服务 -->
      <view class="ease-rent-item ease-rent-bottom">
        <!-- 最后改成链接 -->
        <view class="no-contact">
          <!-- <text class="iconfont icon-receipt-address"></text> -->
          <view class="no-contact-img">
            <image src="@/static/tab_icons/qichezhan.png" alt=""></image>
          </view>
          <view class="no-contact-text">
            <view class="text-top">
              零接触
            </view>
            <view class="text-bottom">
              自动换取车辆
            </view>
          </view>

        </view>
        <view class="credit">
          <view class="credit-img">
            <image src="@/static/tab_icons/icon-.png" alt=""></image>
          </view>
          <view class="credit-text">
            <view class="text-top">
              信用分
            </view>
            <view class="text-bottom">
              自动换取车辆
            </view>
          </view>
        </view>
        <view class="anytime-rent">
          <view class="anytime-rent-img">
            <image src="@/static/tab_icons/weixiufuwu_o.png" alt=""></image>
          </view>
          <view class="anytime-rent-text">
            <view class="text-top">
              随时租
            </view>
            <view class="text-bottom">
              自动换取车辆
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/store/index.js'
  const QQMapWX = require('../../static/qqmap-wx-jssdk.js')

  export default {
    data() {
      return {
        date: '',
        currentMonth: '', //当前时间
        currentTime: '',
        // returnTime: '',
        src: 'https://pic2.imgdb.cn/item/64633d7d0d2dde5777bcec83.jpg',
        // 是否展示
        uni_flex: 'no-display',
        lat: '',
        lng: '',
        id: 0, // 使用 marker点击事件 需要填写id
        title: 'map',
        latitude: 28.68202,
        longitude: 115.85794,
        province: '',
        city: '',
        area: '',
        location: {},
        covers: [{
          id: 1,
          latitude: 28.68202,
          longitude: 115.85794,
          iconPath: '/static/location1.png',
          width: 28,
          height: 28,
          title: '你在这儿', //标注点名
          alpha: 0.5, //透明
        }, ]
      }
    },
    // 页面刚加载执行
    async onLoad() {
      // this.getCarList()
      const that = this
      uni.authorize({
          scope: 'scope.userLocation',
          success() {
            uni.getLocation({
              type: 'gcj02',
              // type: 'wgs84',
              geocode: true,
              isHighAccuracy: true,
              success: function(res) {
                console.log(res)
                console.log('当前位置的经度longitude：' + res.longitude)
                console.log('当前位置的纬度latitude：' + res.latitude)
                that.latitude = res.latitude
                that.longitude = res.longitude
                console.log('that.covers' + that.covers.length)
                for (let i = 0; i < that.covers.length; i++) {
                  that.covers[i].latitude = res.latitude
                  console.log(that.covers[i].latitude)
                  // that.covers[i].id = i + 1
                  console.log(that.covers[i].id)
                  that.covers[i].longitude = res.longitude
                }
                // 腾讯地图 API
                const qqmapsdk = new QQMapWX({ key: 'SGJBZ-NHO3Q-JGC52-4D2RG-CJ7KH-DYFXF' })
                qqmapsdk.reverseGeocoder({
                  location, //默认当前地址
                  success(response) {
                    let info = response.result
                    console.log(info)
                    console.log(that.location)
                    that.location.province = info.address_component.province
                    that.location.city = info.address_component.city
                    that.location.area = info.address_component.district
                    that.location.street = info.address_component.street
                    that.location.address = info.address
                    store.commit('updateAddress', that.location.street)
                    console.log(that.location)
                  }
                })
              },
              fail(err) {
                console.log(err)
              }
            })

          }
        }),
        // let _this = this
        // 设置计时器，获取实时时间
        setInterval(function() {
          that.getTime()
        }, 1000)
    },
    methods: {
      // 获取当前时间函数
      getTime() {
        // console.log(this.padZero(6))
        const dt = new Date()
        // console.log((dt))

        const y = dt.getFullYear()
        // const m = padZero
        const m = this.padZero(dt.getMonth() + 1)
        const d = this.padZero(dt.getDate())

        const hh = this.padZero(dt.getHours())
        const mm = this.padZero(dt.getMinutes())
        const ss = this.padZero(dt.getSeconds())

        this.currentMonth = m + '月' + d + '日'
        this.currentTime = hh + ':' + mm
      },
      // 补零的函数
      padZero(n) {
        return n > 9 ? n : '0' + n
      },
      // 点击跨网还车
      switchChange() {
        if (this.uni_flex === 'no-display') {
          this.uni_flex = 'uni-flex uni-flex-mid'
          // console.log(this.uni_flex)
        } else {
          // console.log('32')
          this.uni_flex = 'no-display'
        }
        // console.log(this.uni_flex)

      },

      // 去订车点击事件
      gotoRent() {
        console.log(this.judgeTime())
        if (this.judgeTime() === undefined || this.judgeTime() === false) {
          this.titleShow()
          return
        }
        uni
          .navigateTo({ url: `/subpkg/index/index?location=${this.location.area + this.location.street}&time=${this.currentMonth + this.currentTime}` })
        console.log('我来订车了')
      },
      // 进入地图页面
      gotoMap() {
        console.log('点击了地图')
        uni.navigateTo({ url: '/subpkg/map2/map2' })
      },

      // 进入选择还车日期
      chooseDate(time) {
        console.log('time' + time)
        uni.navigateTo({ url: `/subpkg/date/date?time=${time}` })
      },
      judgeTime() {
        console.log('1this.currentMonth:' + this.currentMonth)
        console.log('1this.rentTime:' + this.rentTime)
        //如果 都是vuex中的时间
        if (store.state.rentTime.length !== 0 && store.state.returnTime.length !== 0) {
          // 当 借车时间或还车时间小于当前时间 或借车时间大于还车时间
          if (store.state.rentTime < this.currentMonth || store.state.rentTime > store.state.returnTime || store.state
            .returnTime < this.currentMonth) {
            return false
          }
        } else if (store.state.rentTime.length === 0 && store.state.returnTime.length !== 0) {
          console.log(store.state.returnTime)
          // 当前时间为租车时间 只需要判断还车时间
          if (store.state.returnTime < this.currentMonth) {
            console.log('当前时间' + 'this.currentMonth')
            return false
          }

        } else if (store.state.rentTime.length !== 0 && store.state.returnTime.length === 0) {
          // 当前时间为还车时间 只需判断租车时间
          if (store.state.rentTime > this.currentMonth) {
            return false
          }
        } else if (store.state.rentTime.length === 0 && store.state.returnTime.length === 0) {
          return true
        }
        return true

        // console.log('store.state.rentTime:' + store.state.rentTime)
        // console.log('store.state.returnTime:' + store.state.returnTime)
      },
      // 提示信息
      titleShow() {
        uni.showToast({
          title: '租车日期有误',
          icon: 'none',
          duration: 2000
        })
      },

      // 查看全部
      gotoDetail() {
        uni.navigateTo({ url: '/subpkg/Users/U-Details/Details' })
      }


    },
    // 页面加载前渲染
    mounted() {
      console.log(this.computedDays)
    },
    computed: {
      returnTime() {
        if (store.state.returnTime.length !== 0) {
          console.log(123)
          console.log('store.state.returnTime' + store.state.returnTime)
          return store.state.returnTime
        } else {
          return this.currentMonth
        }
      },
      rentTime() {
        if (store.state.rentTime.length !== 0) {
          console.log('store.state.rentTime' + store.state.rentTime)
          return store.state.rentTime
        } else {
          return this.currentMonth
        }
      },
      computedDays() {
        // 06月25日
        if ((this.returnTime.slice(0, 2) - this.rentTime.slice(0, 2)) * 30 + (this.returnTime.slice(3, 5) - this
            .rentTime.slice(3, 5)) === 0) {
          store.commit('updateDays', 1)
          return 1
        } else {
          let days = (this.returnTime.slice(0, 2) - this.rentTime.slice(0, 2)) * 30 + (this.returnTime.slice(3, 5) -
            this
            .rentTime.slice(3, 5))
          store.commit('updateDays', days)
          return days
        }

      }
    }
  }
</script>

<style lang="scss">
  // 轮播图的区域
  swiper {
    height: 330rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  // 订车内容 
  .order-car {
    width: 100%;

    .uni-flex-bottom {
      height: 12rem;
      text-align: center;
      border-top: 1px solid rgba(204, 204, 204);

      .float-item {
        float: left;
      }

      .totalTime {
        width: 50%;
      }

      // rgba(204, 204, 204)
      .rentalTime,
      .returnTime {
        width: 25%;
        margin-top: 1rem;
        font-size: large;

        .datailTime {
          color: rgba(155, 155, 155);
          font-size: small;
        }
      }

      .rentalTime {
        .checkbox {
          display: block;
          margin-top: 0.6rem;
          margin-left: -13px;
          transform: scale(0.7);

        }

        text {
          // color: rgba(155, 155, 155);
          // font-size: small;
        }
      }

      .totalTime {
        padding: 1rem 0;

        .float-time {
          float: left;
          width: 33.3%;
        }

        .this-time {
          padding-top: 2%;
        }

        .border-box {
          width: 33.3%;
          margin: 1rem 0;
          height: 1px;

        }

        .border-box-left {
          background: linear-gradient(to right, white, black);
        }

        .border-box-right {
          background: linear-gradient(to left, white, black);
        }
      }

      .order-buttom {
        // display: block;
        // clear: both;
        float: left;
        width: 92%;
        margin: -10px 4%;
      }
    }

    .uni-flex-top {
      height: 7rem;
    }

    .no-display {
      display: none;
    }

    .uni-flex {
      // display: flex;
      flex-direction: column;

      .float-item {
        text-align: center;
        float: left;
        height: 6rem;
        // flex-direction: row;
      }

      .float-item-left,
      .float-item-right {
        width: 25%;
        // background-color: aqua;
        // height: 30rem;
      }

      .float-item-left {
        .position-left {
          padding-top: 10%;
          color: rgba(155, 155, 155);
          font-size: small;
        }

        .city {
          padding-top: 15%;
        }
      }

      .float-item-mid {
        width: 50%;

        .position-mid {
          text-align: center;
          padding-top: 15%;
          overflow: hidden;
          text-overflow: clip;
          font-size: large;
          font-weight: 500;
        }

        .disstance {
          margin-top: 3%;
          // margin-left: 3%;
          // width: 35%;
          text-align: center;
          font-size: small;
          color: darkorange;
          // color: bisque;
          background-color: antiquewhite;
        }
      }

      .float-item-right {
        .position-right {
          padding-top: 10%;
          color: rgba(155, 155, 155);
          font-size: small;
        }

        .uni-list-cell {
          margin-top: 10%;
        }
      }
    }

    .uni-flex-mid {
      height: 5rem;
      border-top: 1px solid rgba(204, 204, 204);

      .return-car {
        // float: left;
        padding-top: 2%;
        padding-left: 2%;
        color: rgba(155, 155, 155);
        font-size: small;
      }

      .return-position {
        font-size: large;
        font-weight: 500;
        margin-top: 3%;

        .city {
          float: left;
          padding-left: 5%;
          // padding-top: 15%;
        }

        .position-mid {
          float: left;
          padding-left: 15%;
          // text-align: left;
          // padding-top: 15%;
          // overflow: hidden;
          // text-overflow: clip;
          // font-size: large;
          // font-weight: 500;
        }
      }
    }

  }

  // 活动
  .active {}

  // 放心租车
  .ease-rent {
    width: 100%;
    height: 9rem;
    background-color: white;

    .ease-rent-item {
      flex-direction: column;

    }

    .ease-rent-top {
      height: 35%;

      .ease-title {
        float: left;
        font-size: large;
        margin-top: 0.3rem;
        margin-left: 0.5rem;
      }

      .look-content {
        float: right;
        margin-top: 0.3rem;
        margin-right: 0.5rem;
        color: rgba(155, 155, 155);
      }
    }

    // 零接触 信誉分 24小时服务
    .ease-rent-bottom {
      height: 65%;
      text-align: center;

      .no-contact {
        width: 33%;
        float: left;

        .no-contact-img {
          width: 100%;
          height: 50%;

          image {
            // margin-left: 15%;
            width: 2.4rem;
            height: 2.4rem;
          }
        }
      }

      .credit {
        width: 33%;
        float: left;

        .credit-img {
          width: 100%;
          height: 50%;

          image {
            // margin-left: 15%;
            width: 2.4rem;
            height: 2.4rem;
          }
        }
      }

      .anytime-rent {
        width: 33%;
        float: left;

        .anytime-rent-img {
          width: 100%;
          height: 50%;

          image {
            // margin-left: 15%;
            width: 2.4rem;
            height: 2.4rem;
          }
        }
      }

      // 零接触等相同的文字样式
      .text-top {}

      .text-bottom {
        margin-top: 3%;
        color: rgba(155, 155, 155);
        font-size: small;
      }
    }
  }
</style>